import { View, Text, Input } from "@tarojs/components";
import { NavBar, Button, ActionSheet, Dialog, Cell } from "@antmjs/vantui";
import { IconFont } from "../../../../components";
import Taro,{getMenuButtonBoundingClientRect} from "@tarojs/taro";
import { useState, useCallback } from "react";
import './index.scss'

const Dialog_ = Dialog.createOnlyDialog()
const AdFress = () => {
    const btn = getMenuButtonBoundingClientRect();
    const [show, setShow] = useState(false)
    const [value, setValue] = useState(null)
    //订阅会员
    const confirm = useCallback(() => {
        if(value)(setValue(null))
        Dialog_.confirm({
            title: <View>
                <View>设置邀请码</View>
                <View className="alert-view">自定义设置您的专属邀请码，邀请您的小伙伴更方便！设置大于4位的邀请码只限大小写字母和数字</View>
            </View>,
            message: (
                <Input
                    className="input-view"
                    placeholder="输入邀请码"
                    value={value}
                    onInput={(e) => setValue(e.detail.value)}
                />
            ),
        }).then((value) => {
            if(value=='confirm'){
                setShow(true)
            }else{

            }
        })
    }, [value])

    //获取金币
    const obtainGoldCoins = () => {
        Taro.navigateTo({ url: '/pages/home/components/inviter_list/index' })
    }

    return (
        <View className="adfree-frame-view">
            <NavBar title='邀请小伙伴' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed/>
            <View className="adfree-view" style={{paddingTop:btn.bottom+20}}>
                <IconFont name="ac-yaoqing" size={200} />
                <View className="info-text-view">
                    <View className="title-view">0</View>
                    <Text className="sub-tit">位</Text>
                </View>
                <View className="bottom-bg-view">
                    <Button onClick={confirm} className="moon-view" type='primary'>邀请小伙伴</Button>
                    <Button onClick={obtainGoldCoins} className="more-view" plain hairline type="primary">我的小伙伴</Button>
                </View>
            </View>
            <ActionSheet show={show} title="邀请小伙伴" onClose={() => setShow(false)}>
                <View className="sheet-view">易搜索一款非常好用的小程序，超多好玩的软件，拥有再多不如有我！</View>
                <View className="sheet-view" style={{marginTop:20}}>{`我的邀请码：${value}`}</View>
                <View className="sheet-box-view">
                    <View className="btn-view" ><Button onClick={() => {
                        Taro.setClipboardData({
                            data: `易搜索一款非常好用的小程序，超多好玩的软件，拥有再多不如有我！\n我的邀请码：${value}`,
                            success: function (res) {
                              Taro.getClipboardData({
                                success: function (res) {
                                  console.log(res.data) // data
                                  setShow(false)
                                }
                              })
                            }
                          })
                    }} className="btn" type='primary' plain hairline >复制</Button></View>
                    <View className="btn-view"><Button className="btn" type='primary'>分享</Button></View>
                </View>
            </ActionSheet>
            <Dialog_ />
        </View>
    )
}

export default AdFress